import '../App.css'
import { useNavigate, useParams } from 'react-router-dom'
import { Tabs, Swiper } from 'antd-mobile'
import { path } from '../config/index.ts'
import { NavBar } from 'antd-mobile'
import { useState, useEffect } from 'react';
import right from '../assets/箭头-右.png'


export default function Xiangqing() {
    const navigate = useNavigate();
    const { id } = useParams<{ id: string }>();
    const [productDetail, setProductDetail] = useState<any>(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const fetchData = () => {
            try {
                setIsLoading(true);
                // 从本地存储获取数据
                const cachedProduct = sessionStorage.getItem('dataList');

                if (cachedProduct) {
                    // 解析数据
                    const data = JSON.parse(cachedProduct);
                    console.log('解析后的原始数据:', data);

                    // 直接将处理好的数据存储到状态中
                    setProductDetail(data);
                } else {
                    console.log('本地存储中没有找到数据');
                }
            } catch (error) {
                console.error('获取详情失败:', error);
            } finally {
                setIsLoading(false);
            }
        };

        fetchData();
    }, [id]);

    const back = () => {
        navigate(-1);
    };

    // 处理轮播图数据，使用 productDetail 中的 banner
    const bannerItems = productDetail?.banner?.split(',').map((bannerUrl: string, index: number) => (
        <Swiper.Item key={index}>
            <div
                className='content'
                style={{ backgroundImage: `url(${path + bannerUrl.trim()})`, backgroundSize: 'cover', backgroundPosition: 'center', height: '300px' }}>
            </div>
        </Swiper.Item>
    ))

    return (
        <div>
            <NavBar onBack={back} style={{ backgroundColor: '#fff' }}>商品详情</NavBar>
            <Tabs style={{ fontSize: '14px' }}>
                <Tabs.Tab title='商品' key='1'>
                    <div className="banner-container">
                        {isLoading ? (
                            <div className="loading-swiper">轮播图加载中...</div>
                        ) : productDetail?.banner && bannerItems ? (
                            <Swiper
                                loop
                                autoplay
                                className="detail-swiper"
                                // 明确设置轮播图宽高比例
                                style={{
                                    width: '100%',
                                    '--height': '300px'
                                }}
                            >
                                {bannerItems}
                            </Swiper>
                        ) : (
                            <div className="loading-swiper">暂无轮播图数据</div>
                        )}
                    </div>
                    <div className='white p-10'>
                        <div style={{ height: '15px' }}></div>
                        <p className='product-conten'>{productDetail?.content}</p>
                        <p className='red product-price'>￥{productDetail?.price}</p>
                        <div style={{ height: '15px' }}></div>
                    </div>
                    <div className='mes white'>
                        <div style={{ fontSize: '15px' }}>用户评价(1)</div>
                        <div style={{ display: 'flex', alignItems: 'center' }} onClick={() => navigate('/quanbu')}>
                            <span>查看全部</span>
                            <img src={right} alt="" className='icon' />
                        </div>
                    </div>
                    {/* 用户评价 */}
                    <div className='white p-10'>
                        <div style={{ display: 'flex', alignItems: 'center', gap: '10px', paddingTop: '10px' }}>
                            <img src="https://img.xiaopiu.com/userImages/img85915d870f82d8.jpg" alt="" className='wid radius' />
                            <span style={{ marginBottom: '10px' }}>r****5</span>
                        </div>
                        <div>
                            好用，值得购买，非常推荐，物流也快，服务态度很好，好用，值得购买，非常推荐，物流也快，服务态度很好，
                        </div>
                        <div style={{ fontSize: '12px', margin: '15px 0px' }}>
                            2020-05-05
                        </div>
                        <div>
                            <img src="https://img.xiaopiu.com/userImages/img17095018ac1206f78.jpg" alt="" className='widbig' />
                        </div>
                        <div style={{ height: '20px' }}></div>
                    </div>
                    {/* 图片 */}
                    <div>
                        <img src="https://img.xiaopiu.com/userImages/img17310118acac0bec0.png" alt="" className='w100' />
                    </div>
                    <div style={{ height: '80px' }}></div>
                </Tabs.Tab>
                <Tabs.Tab title='详情' key='2'>
                    <div className='no-data-text white'>暂无数据</div>

                </Tabs.Tab>
                <Tabs.Tab title='评价' key='3'>
                    <div className='no-data-text white'>暂无数据</div>
                </Tabs.Tab>

            </Tabs>
        </div>
    )
}